<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="/css/css.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/WaresSearch.css">
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/vue.js"></script>
</head>
<style>
    .block{
        display: block;
    }
    .none{
        display: none;
    }
</style>
<body style="background-color:#f5f5f5;">
    <div id="app">
        <div class="header">
            <div class="wrap">
                <ul class="header-left">
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">loT</a><span>|</span></li>
                    <li><a href="#">云服务</a><span>|</span></li>
                    <li><a href="#">天星数科</a><span>|</span></li>
                    <li><a href="#">有品</a><span>|</span></li>
                    <li><a href="#">小爱开放平台</a><span>|</span></li>
                    <li><a href="#">企业团购</a><span>|</span></li>
                    <li><a href="#">资质证照</a><span>|</span></li>
                    <li><a href="#">协议规则</a><span>|</span></li>
                    <li>
                        <a href="#">下载app</a><span>|</span>
                        <div class="download">
                            <a href="#">
                                <img src="/img/Download.jpg" alt="">
                                <p>小米商城app</p>
                            </a>
                        </div>
                        <div class="triangle"></div>
                    </li>
                    <li><a href="#">智能生活</a><span>|</span></li>
                    <li><a href="#">Select Location</a></li>
                </ul>
                <ul class="header-right">
                    <li id="Login-li"><a href="#" onclick="Login()">登录</a><span>|</span></li>
                    <li id="Rigist-li"><a href="#" onclick="Rigist()">注册</a><span>|</span></li>
                    <li id="account-li">
                        <a id="account" href="Login.html">{{account}}</a>
                        <span>|</span>
                        <div id="pesondiv">
                            <ul id="pesonul">
                                <li onclick="mypersonalcenter()">个人中心</li>
                                <li onclick="evaluateorder()">评价订单</li>
                                <li onclick="mypersonalcenter()">我的喜欢</li>
                                <li onclick="location.href=('AccountManagement.html')">小米账户</li>
                                <li onclick="location.href=('Login.html')">退出登录</li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#" onclick="SelectMyOrder()">我的订单</a><span>|</span></li>
                    <li><a href="#">消息通知</a></li>
                    <li class="cart">
                        <a href="#">购物车</a>
                        <div class="cart-list">
                            哦！购物车是空的！
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="nav">
            <div class="wrap">
                <div class="logo">
                    <a href="#">
                        <img src="/img/Login/Login.jpg"  onclick="Home()" style="width: 75px;" />
                    </a>
                </div>
                <div class="nav-bar">
                    <ul>
                        <li><a href="#">Xiaomi手机</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/1.jpg" alt="">
                                                </div>
                                                <p>Xiaomi Civi 1s</p>
                                                <p>2299元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/2.jpg" alt="">
                                                </div>
                                                <p>Xiaomi 12 Pro</p>
                                                <p>4199元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/3.jpg" alt="">
                                                </div>
                                                <p>Xiaomi12</p>
                                                <p>3199元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/4.jpg" alt="">
                                                </div>
                                                <p>Xiaomi 12X</p>
                                                <p>2399元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/5.jpg" alt="">
                                                </div>
                                                <p>Xiaomi 11青春活力板</p>
                                                <p>1799元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Xiaomi/6.jpg" alt="">
                                                </div>
                                                <p>Xiaomi Civi</p>
                                                <p>2299元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">Redmi红米</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/1.jpg" alt="">
                                                </div>
                                                <p>Redmin Note 11Pro+</p>
                                                <p>1999元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/2.jpg" alt="">
                                                </div>
                                                <p>Redmin Note 11Pro</p>
                                                <p>1699元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/3.jpg" alt="">
                                                </div>
                                                <p>Redmin Note 11SE</p>
                                                <p>999起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/4.jpg" alt="">
                                                </div>
                                                <p>Redmin 10A</p>
                                                <p>699元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/5.jpg" alt="">
                                                </div>
                                                <p>Redemin K50 Pro</p>
                                                <p>2699起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Redmi/6.jpg" alt="">
                                                </div>
                                                <p>Redemin K50</p>
                                                <p>2199元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">电视</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/1.jpg" alt="">
                                                </div>
                                                <p>Redmi智能电视X55 2022</p>
                                                <p>2399元</p>
                                            </a>
                                        </li>
                                        
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/2.jpg" alt="">
                                                </div>
                                                <p>Redmi智能电视X65 2022</p>
                                                <p>3099元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/3.jpg" alt="">
                                                </div>
                                                <p>小米电视6 65° OLED</p>
                                                <p>6699元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/4.jpg" alt="">
                                                </div>
                                                <p>小米电视 大师 77° OLED</p>
                                                <p>17999元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/5.jpg" alt="">
                                                </div>
                                                <p>小米透明电视</p>
                                                <p>49999元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/TV/6.jpg" alt="">
                                                </div>
                                                <p>小米电视 大师 65英寸OLED</p>
                                                <p>8999元</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">笔记本</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/1.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>RedmiBook Pro 14 2022 锐龙版</p>
                                                <p>5299元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/2.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>RedmiBook Pro 15 2022 锐龙版</p>
                                                <p>5499元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/3.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>RedmiBook Pro 14  锐龙版</p>
                                                <p>4699元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/4.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>Redmi Book Pro 14  2022</p>
                                                <p>5399元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/5.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>小米笔记本 Pro 14 锐龙版</p>
                                                <p>5499元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/NoteBook/6.jpg" alt="" width="160px" height="110px" />
                                                </div>
                                                <p>Redmi G 2021 AMD版</p>
                                                <p>6499元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">平板</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Flat/1.jpg" alt="">
                                                </div>
                                                <p>小米平板5</p>
                                                <p>1999元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Flat/2.jpg" alt="">
                                                </div>
                                                <p>小米平板5 Pro 5G</p>
                                                <p>3499元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Flat/3.jpg" alt="">
                                                </div>
                                                <p>小米平板5 Pro</p>
                                                <p>2499元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">家电</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/HouseHold/1.jpg" alt="">
                                                </div>
                                                <p>巨省电  米家空调 1.5匹 新1级能效 睡眠版</p>
                                                <p>2199元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/HouseHold/2.jpg" alt="">
                                                </div>
                                                <p>巨省电 3匹变频新一级能效（鎏金款）</p>
                                                <p>5299元起</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/HouseHold/3.jpg" alt="">
                                                </div>
                                                <p>米家扫拖机器人 1T</p>
                                                <p>1299元起</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">路由器</a>
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Router/1.jpg" alt="">
                                                </div>
                                                <p>Redmi电竞路由AX5400</p>
                                                <p>599元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Router/2.jpg" alt="">
                                                </div>
                                                <p>小米路由AX6000</p>
                                                <p>549元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Router/3.jpg" alt="">
                                                </div>
                                                <p>小米路由AX9000</p>
                                                <p>1299元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Router/4.jpg" alt="">
                                                </div>
                                                <p>Redmi路由AC2100</p>
                                                <p>199元</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="nav-img-box">
                                                    <img src="/img/nav/Router/5.jpg" alt="">
                                                </div>
                                                <p>小米路由器4A 千兆版</p>
                                                <p>129元</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </div>
                <div class="search">
                    <input type="text" placeholder="xiaomi11">
                    <button type="button">搜索</button>
                    <div class="search-list">
                        <a href="#">手机</a>
                        <a href="#">电脑</a>
                        <a href="#">电视</a>
                        <a href="#">家具</a>
                        <a href="#">空调</a>
                        <a href="#">只能机器人</a>
                        <a href="#">小爱周边</a>
                        <a href="#">小天鹅洗衣机</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="wl">
            <div class="idx-box">
                <div class="good-box">
                    <div class="good-item" v-for="w in WaresAllList" @click="TextClick($event)">
                        <input type="hidden" :value="w.productID" />
                        <img class="pic" :src="w.productPicture.split(',')[0]" alt="">
                        <h3 class="name">{{w.productName}}</h3>
                        <h4 class="desc">{{w.productDescribe}}</h4>
                        <p class="price"><span>{{w.productPrice}}元起</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/js/userscommon.js"></script>
<script>
    let vm = new Vue({
        el:"#app",  
        data:{
            WaresAllList:[],
            account:0,
        },
        created: function () {
            // 获取跳转页面的url数据
            //首页传送的指定商品id从而获取对应商品信息
            var url = window.location.href
            var path = url.split('?')[1]
            var field = new URLSearchParams('?'+path)
            var account = field.get('account')
            // var account = 1675900177
            this.account= account
            // var search = 'xiaomi'
            // var search = field.get('name')
            var search = "小米"
            this.GetUserID(account)
            this.SearchAll(search)
        },
        methods: {
            //读取登录用户信息
            GetUserID : function(account){
                if(account == null || account == 0){
                    var login =  document.getElementById("Login-li")
                    var rigist = document.getElementById("Rigist-li")
                    login.className="block"
                    rigist.className="block"
                    var account = document.getElementById("account-li")
                    account.className="none"
                }else{
                    var login =  document.getElementById("Login-li")
                    var rigist = document.getElementById("Rigist-li")
                    login.className="none"
                    rigist.className="none"
                    var account = document.getElementById("account-li")
                    account.className="block"
                }
            },
            SearchAll:function(name){
                axios.get('/product/getAllName',{ params: { name: name } }).then(function (resp) {
                    vm.WaresAllList = resp.data.data
                })
            },
            // 点击跳转商品页面
            TextClick(e){
                var proID =e.currentTarget.firstElementChild.value
                window.location.href="Purchaseinterface.html?proID="+proID+
                "&account="+vm.account;
            },
        }
    });
</script>
<script src="/js/account.js"></script>
</html>